<template>
  <div>
    <p class="filter"></p>
		<div class="addBox">
			<h3 class="fixTitle">
        <span>试题预览</span>
        <p>
          <em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
        </p>
      </h3>
      <div style="margin-top:40px;padding: 0 20px;">
        <p style="padding: 5px 0;">
          <span class="color55bc75 m-l-20"><svg-icon icon-class="success" class="font-size18" /><b class="font18">正确题目</b></span>
          <span class="colorf25e5e"><svg-icon icon-class="error" class="font-size18" /><b class="font18">错误题目</b></span>
        </p>
        <ul style="padding: 20px 0;" v-loading="listLoading">
          <!--有完整答题的题目-->
          <li v-for="(item, index) in exams" :key="item.num">
            <i class="width76">{{index + 1}}</i>
            <span class="color55bc75" v-if="item.isRight==1"><svg-icon icon-class="success" class="font-size22" /></span>
            <span class="colorf25e5e" v-else><svg-icon icon-class="error" class="font-size22" /></span>
          </li>
         <!-- 未答的题目，默认为错误  -->
          <li v-for="items in exams1" :key="items.hasNum">
            <i class="width76">{{items.hasNum}}</i>
          </li>
        </ul>
      </div>
		</div>
  </div>
</template>
<script>
import { toGetSheet } from '@/api/paper'
export default {
  props: ['examMainId'],
  data() {
    return {
      exams: [],
      exams1: [],
      isFull: null,
      hasNum: null,
      listLoading: false
    }
  },
  methods: {
    getAnswerSheet() {
      // 根据ID查找该专题下得试卷
      // this.listLoading = true
      this.exams1 = []
      console.log(this.exams1)
      toGetSheet(this.examMainId).then(res => {
        // 正确回调
        this.exams = res.data.data.list
        this.isFull = res.data.data.isFull
        this.hasNum = res.data.data.hasNum
        console.log('sss', this.isFull)
        for (var i = 0; i < this.isFull; i++) {
          this.hasNum++
          this.exams1.push({
            hasNum: this.hasNum,
            status: -1
          })
        }
        console.log(this.exams1)
        this.listLoading = false
      })
        .catch(err => {
          console.log(err)
        })
    },
    close() {
      this.$emit('hidePreview', false)
    }
  },
  watch: {
    examMainId: {
      handler: function(val, oldval) {
        this.getAnswerSheet()
      }
    }
  },
  mounted() {
    this.getAnswerSheet()
  }
}
</script>
<style scoped>
p,h3{ margin: 0;}
  .fixTitle{
    width: 800px;
  }
  .addBox {
		width: 800px;
		height: 500px;
		overflow: auto;
		background: #fff;
		position: fixed;
		left: 25%;
		top: 15%;
		z-index: 120;
  }
  .color55bc75{
    color: #55bc75;
  }
  .m-l-20 {
    margin-right: 20px;
  }
  .colorf25e5e{
    color: #f25e5e;
  }
  .font18{
    font-size: 16px;
    font-weight: 500;
    margin-left: 10px;
    color: #333;
  }
  .font-size22 {
    font-size: 22px;
  }
  .font-size18{
    font-size: 18px;
  }
  .width76 {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 5px;
    border: 2px solid #e5e5e5;
    font-style: normal;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
  }
  li{
    position: relative;
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
  }
  li span {
    position: absolute;
    bottom: -5px;
    right: -5px;
  }
</style>


